﻿/*bg color*/
.layui-bg-green-light {
    background-color: #5FB878;
    color: #ffffff;
}
.layui-bg-primary {
    background: var(--caime-theme-primary);
    color: #ffffff;
}
.layui-bg-focus {
    background:  var(--caime-theme-focus);
}
.layui-bg-white {
    background: #FFFFFF;
}
.btn-bg-primary {
    background: var(--caime-theme-primary);
    color: #ffffff;
}
.btn-bg-gray {
    background: var(--caime-theme-bg-normal);
    color: #ffffff;
}
.btn-bg-dark {
    background: var(--caime-theme-bg-dark);
    color: #ffffff;
}
.btn-bg-focus {
    background: var(--caime-theme-focus);
    color: #ffffff;
}
.btn-bg-red {
    background: #FF5722;
    color: #ffffff;
}
.btn-bg-yellow {
    background: #FFB800;
    color: #ffffff;
}
.layui-btn-shadow {
    box-shadow: 1px 3px 3px 3px #EEEEEE;
}
.layui-btn-shadow-primary {
    box-shadow: 1px 3px 3px 3px var(--caime-theme-primary);
}
.layui-btn-shadow-focus {
    box-shadow: 1px 3px 3px 3px var(--caime-theme-focus);
}

/*文字选中背景色*/
::selection{background:#5FB878; color:#fff;}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: var(--caime-theme-primary);
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid var(--caime-theme-primary);
    background-color: var(--caime-theme-focus);
}

.validation-summary-errors {
    font-weight: bold;
    color: var(--caime-theme-primary);
}

.validation-summary-valid {
    display: none;
}

/*padding*/
.container-space {
    padding: 10px;
}
.layui-padding-0 {
    padding: 0px;
}
.layui-padding-5 {
    padding: 5px;
}
.layui-padding-10 {
    padding: 10px;
}
.layui-padding-15 {
    padding: 15px;
}
.layui-padding-20 {
    padding: 20px;
}
.layui-padding-25 {
    padding: 25px;
}
.layui-padding-30 {
    padding: 30px;
}
.layui-padding-40 {
    padding: 40px;
}
.layui-padding-50 {
    padding: 50px;
}

/*对齐*/
.layui-text-center {
    text-align: center;
}
.layui-text-right {
    text-align: right;
}
.layui-text-left {
    text-align: left;
}

/*font-size*/
.layui-font-12 {
    font-size: 12px;
}
.layui-font-14 {
    font-size: 14px;
}
.layui-font-16 {
    font-size: 16px;
}
.layui-font-18 {
    font-size: 18px;
}
.layui-font-20 {
    font-size: 20px;
}
.layui-font-22 {
    font-size: 22px;
}
.layui-font-24 {
    font-size: 24px;
}
.layui-font-28 {
    font-size: 28px;
}
.layui-font-32 {
    font-size: 32px;
}
.layui-font-64 {
    font-size: 64px;
}

/*宽度*/
.layui-width-10-1 {
    width: 10%;
}
.layui-width-5-1 {
    width: 20%;
}
.layui-width-3-1 {
    width: 33%;
}
.layui-width-4-1 {
    width: 25%;
}
.layui-width-2-1 {
    width: 50%;
}
.layui-width-1-1 {
    width: 100%;
}

/*color*/
.layui-color-red {
    color: #FF5722;
}
.layui-color-orange {
    color: #FFB800;
}
.layui-color-green {
    color: #009688;
}
.layui-color-cyan {
    color: #2F4056;
}
.layui-color-blue {
    color: #01AAED;
}
.layui-color-black {
    color: #393D49;
}
.layui-color-gray {
    color: #c2c2c2;
}
.layui-color-white {
    color: #ffffff;
}

.layui-color-primary {
    color: var(--caime-theme-primary);
}
.layui-color-focus {
    color: var(--caime-theme-focus);
}
.layui-text-price {
    color: var(--caime-theme-focus);
    font-size: var(--caime-theme-text-size-bigbig);
    font-weight: bold;
}
.layui-text-price-small {
    color: var(--caime-theme-focus);
    font-size: var(--caime-theme-text-size-small);
    font-weight: bold;
}
.layui-text-price-focus {
    color: var(--caime-theme-focus);
    font-size: var(--caime-theme-text-size-bigbig);
    font-weight: bold;
}

/*浮动*/
.layui-position-fixed-footer {
   position: fixed; 
   bottom: 0; 
   left: 0;  
}
.layui-position-fixed-header {
   position: fixed; 
   top: 0; 
   left: 0;
    z-index: 999;
}
.layui-position-zindex {
    z-index: 999;
}

.layui-margin-0 {
    margin: 0px;
}

/*input*/
.layui-input-sm {
    height: 30px;
}

/*avatar*/
.layui-avatar {
    width: 32px;
    height: 32px;
}
.layui-avatar-md {
    width: 48px;
    height: 48px;
}
.layui-avatar-big {
    width: 64px;
    height: 64px;
}

/*quote*/
.layui-elem-quote-noleft {
    margin-bottom: 10px;
    padding: 15px;
    line-height: 22px;
    border-left: 0px solid #009688;
    border-radius: 0 2px 2px 0;
    background-color: #f2f2f2;
    padding: 10px;
    text-align: center;
    font-size: 16px;
}
.layui-elem-quote {
    padding: 10px;
    text-align: center;
    font-size: 16px;
}
.layui-elem-quote-red {
    border-left: 5px solid var(--caime-theme-primary);; 
}

.layui-elem-quote {
    border-left: 5px solid var(--caime-theme-primary);
}

.layui-elem-quote .layui-btn {
    position: absolute;
    right: 30px;
    top: 10px;
}

/*outHtml */
.layui-out-html-container {
    width: 90%;
}

/**/
.layui-tab-brief>.layui-tab-title .layui-this {
    color: var(--caime-theme-primary);
}
.layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after {
    border-bottom: 5px solid var(--caime-theme-primary);
}

.layui-btn-primary:hover {
    border-color: var(--caime-theme-primary);
}

/*avatar*/
.layui-avatar {
    width: 28px;
    height: 28px;
}
.layui-avatar-md {
    width: 32px;
    height: 32px;
}
.layui-avatar-md {
    width: 48px;
    height: 48px;
}
.layui-avatar-lg {
    width: 64px;
    height: 64px;
}

/*layer皮肤*/
.layui-layer-tm 
{
    opacity: 0.9;
    box-shadow: 0 0 0 rgba(0,0,0,0); /*前景无阴影*/
}

.layui-tag-wrap {
    position: absolute;
    top:-20px;
    left:0px;
}
.layui-tag-wrap-body {
      padding: 0.5rem 0.75rem 0.5rem 1rem;  
      font: bold 16px system-ui;
       color: #FFFFFF;
      -webkit-clip-path: polygon(0px 0%, 100% 0%, 100% 100%, 0px 100%, 0 50%);          
      clip-path: polygon(15px 0%, 100% 0%, 100% 100%, 0px 100%, 0 50%);
}
.layui-tag-wrap-body-ok {
    background: var(--caime-theme-primary);
}
.layui-tag-wrap-body-no {
    background: var(--caime-theme-bg-normal);
}

/*.layui-tab-content*/
.layui-tab-content {
    padding: 10px 0px;
}

/*tag*/
.layui-tag {
    border-radius:15px 0px;
    margin-top: 10px;
    padding: 3px 5px;
    text-align: center;
    background: var(--caime-theme-primary);
    color: #ffffff;
}
.layui-tag-float {
    position: absolute;
    top: -32px;
    right: -12px;
    z-index: 999;
}

.layui-tag-primary {
    border-radius: 15px 0px;
    margin-top: 10px;
    padding: 3px 5px;
    text-align: center;
    background: var(--caime-theme-primary);
    color: #ffffff;
}
.layui-tag-focus {
    border-radius:15px 0px;
    margin-top: 10px;
    padding: 3px 5px;
    text-align: center;
    background: var(--caime-theme-focus);
    color: #ffffff;
}
.layui-tag a,.layui-tag-primary a,.layui-tag-focus a {
    color: #FFFFFF;
}

/*content hide*/
.layui-x-hide {
    overflow-x: hidden;
}
.layui-y-hide {
    overflow-y: hidden;
}

/*rounded*/
.layui-rounded {
    border-radius: 6px;
}
.layui-rounded-tl-br {
    border-radius: 6px 0px 6px 0px;
}
.layui-rounded-tr-bl {
    border-radius: 0px 6px 0px 6px;
}
.layui-rounded-t {
    border-radius: 6px 6px 0px 0px;
}
.layui-rounded-b {
    border-radius: 0px 0px 6px 6px;
}

/*边角*/
.item-green-corner {
    background-image: url(/Images/角标1.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 32px 32px;
}

/*券*/
.layui-coupons::before {
    content: '';
    position: absolute;
    height: 100%;
    width:5px;
    top: 0;
    left: 0px;
    background-image: linear-gradient(to bottom, #FFFFFF 5px, transparent 5px, transparent),
    radial-gradient(10px circle at 5px 10px, transparent 5px, #FFFFFF 5px);
    background-size: 5px 15px;
  }

/*layui radius */
.layui-radius-l20 {
    border-radius: 20px 0px 0px 20px;
}
.layui-radius-r20 {
    border-radius: 0px 20px 20px 0px;
}
.layui-radius-t20 {
    border-radius: 20px 20px 0px 0px;
}
.layui-radius-b20 {
    border-radius: 0px 0px 20px 20px;
}
.layui-radius-20 {
    border-radius: 20px 20px 20px 20px;
}
.layui-radius-lt-rb-20 {
    border-radius: 20px 0px;
}
.layui-radius-rt-lb-20 {
    border-radius: 0px 20px;
}
.layui-radius-10 {
    border-radius: 10px 10px 10px 10px;
}
.layui-radius-15 {
    border-radius: 15px 15px 15px 15px;
}

/*layui 相关重写*/
.layui-input, .layui-select, .layui-textarea {
    height: 38px;
    line-height: 1.3;
    line-height: 38px\9;
    border-width: 1px;
    border-style: solid;
    background-color: #f2f2f2;
    border-radius: 12px;
}